import * as React from "react";
import "~/pretty-checkbox/src/pretty-checkbox.scss";
import Radioitem from "./Radio";
import formcontext from '../form';

const Checkbox = props => {
  const key = props["data-key"];
  const { node } = props;
  const form = React.useContext(formcontext);
  const { getFieldDecorator } = form;
  return (
    <div style={{ ...props.style }}>
      {getFieldDecorator(node.data.column)(
        <RadioGroup
          name={key}
          node={node}
          {...props.attributes}
          className="pretty p-default"
        />
      )}
    </div>
  );
};

export function Radio(props) {
  const { node } = props;
  const key = props["data-key"];
  const { datasource } = node.data;
  const [ value, onChange ] = React.useState('');
  return (
    <div>
      {datasource.value.map((option, index) => (
        <Radioitem
          name={key}
          value={value}
          onChange={e => onChange(e)} 
          key={`${key}${index}`}
          label={option}
          {...props}
        />
      ))}
    </div>
  );
}
export default Checkbox;
export class RadioGroup extends React.Component {
  state={
    value: '',
  }

  render() {
    const key = this.props["data-key"];
    const { node } = this.props;
    const { datasource } = node.data;
    const onChange = (value) => {
      this.setState(value);
    };
    return (
      <div className="group">
        {datasource.value.map((option, index) => (
          <Radioitem
            onChange={onChange} value={this.state.value}
            key={`${key}${index}`} label={option}
            {...this.props}
          />
        ))}
      </div>
    );
  }
}
